      <template>
    <treeselect
        v-model="dept"
    :options="deptList"
    :placeholder="placeholder"
    :normalizer="normalizer"
    :show-count="true"
    v-bind="$attrs"
    v-on="$listeners"
    :disabled="disabled"
    :class="size"
    noResultsText="暂无"
        :appendToBody="true"
        zIndex="2100"
        />
        </template>
        <script>
    import user from "@/api/systemManagement/user/index";
    import {handleTree} from "@/utils/common";
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import { mapGetters } from 'vuex'
    export default {
        name:"DeptSelectTree",
        components:{Treeselect},
        data(){
            return{
                simpleDeptList:[],
                dept:this.value
            }
        },
        props: {
            params:{
                type:Object,
                default: function () {
                    return {}
                }
            },
            value: {
                type: [String, Array,Number],
                default: null
            },
            deptType:{
                type:String,
                default: 'all'
            },
            disabled:{
                type:Boolean,
                default:false
            },
            placeholder:{
                type:String,
                default:"请选择部门"
            },
            size:{
                type:String,
                default:""
            },
            allDeptList:{
                type:Array,
                default:function () {
                    return []
                }
            },
            option:{
              type:Object,
              default:function () {
                  return {id:"id",name:"name",children:"children"}
              }
            },
            myDeptList:{
                type:Array,
                default:function () {
                    return []
                }
            }
        },
        watch: {
            value(val) {
                this.dept = this.value;
            },
            dept(val){
                if(val!=this.value){
                    this.changeValue(val)
                }
            }
        },
        computed: {
          ...mapGetters(["userinfo"]),
            deptList(){
                let myDeptList = this.userinfo.user_dept
              if(this.myDeptList.length>0){
                    myDeptList = this.myDeptList
                }
                return this.deptType=="my"&&(!this.disabled)?myDeptList:this.simpleDeptList
            },
        },
        created() {
            if(this.deptType=="other"){
                this.simpleDeptList = JSON.parse(JSON.stringify(this.allDeptList))
            }else if(this.allDeptList.length>0){
                this.simpleDeptList = handleTree(this.allDeptList, "id", "parent_dept");
                if(!this.dept && this.deptType=='my'){
                    if(this.deptList[0])this.dept = this.deptList[0].id;
                    this.$emit("select",this.deptList[0])
                }
            }else{
                this.getSimpleDeptList()
            }
        },
        methods:{
            /** 转换菜单数据结构 */
            normalizer(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node[this.option.id],
                    label: node[this.option.name],
                    children: node[this.option.children]
                };
            },
            //获取简易部门列表
            getSimpleDeptList() {
                user.getSimpleDeptList(this.params)
                    .then(res => {
                            this.simpleDeptList = handleTree(res.data, "id", "parent_dept");
                            if(!this.dept && this.deptType=='my'){
                                if(this.deptList[0])this.dept = this.deptList[0].id;
                                this.$emit("select",this.deptList[0])
                            }
                    });
            },
            changeValue(val) {
                this.$emit("input", val);
            },
        }
    }
</script>
<style lang="scss" scoped>
  .small{
    width:220px;
    ::v-deep .vue-treeselect__control{height:32px;}
    ::v-deep .vue-treeselect__placeholder, .vue-treeselect__single-value{
      line-height: 32px;
    }
  }
</style>
